<extend name="Public/base" />

<block name="body">
	<!-- 标题栏 -->
	<div class="main-title">
		<h2>在线打卡</h2>
	</div>
	<div class="cf">
		<div class="fl">
            <button class="btn ajax-post confirm" url="{:U('Attendence/changeStatus',array('method'=>'deleteUser'))}" target-form="ids">删 除</button>
			<button class="btn run-time" style="background:#CE1961;display:none;"></button>
        </div>
		<!-- 高级搜索 -->
		<div class="search-form fr cf">
			<div class="sleft">
				<div class="drop-down">
					<span id="sch-sort-txt" class="sort-txt" data="{$status}"><if condition="get_status_title($status) eq ''">所有<else/>{:get_status_title($status)}</if></span>
					<i class="arrow arrow-down"></i>
					<ul id="sub-sch-menu" class="nav-list hidden">
						<li><a href="javascript:;" value="">所有</a></li>
						<li><a href="javascript:;" value="1">迟到</a></li>
					</ul>
				</div>
				<input type="text" name="uid" class="search-input" value="{:I('uid')}" placeholder="请输入用户UID">
				<a class="sch-btn" href="javascript:;" id="search" url="{:U()}"><i class="btn-search"></i></a>
			</div>
            <div class="btn-group-click adv-sch-pannel fl">
                <button class="btn">高 级<i class="btn-arrowdown"></i></button>
                <div class="dropdown cf">
                	<div class="row">
                		<label>更新时间：</label>
                		<input type="text" id="time-start" name="time-start" class="text input-2x" value="" placeholder="起始时间" /> -
                		<input type="text" id="time-end" name="time-end" class="text input-2x" value="" placeholder="结束时间" />
                	</div>
                	
                </div>
            </div>
		</div>
    </div>
    <!-- 数据列表 -->
    <div class="data-table table-striped">
        <table class="">
			<thead>
				<tr>
					<th class="row-selected row-selected"><input class="check-all" type="checkbox"></th>
					<th class="">UID</th>
					<th class="">姓名</th>
					<th class="">职位</th>
					<th class="">部门</th>
					
					<th class="">状态</th>
					<th class="">签到时间</th> 
					<th class="">签退时间</th> 
					<th class="">操作</th> 
				</tr>
			</thead>
			<tbody>
			<volist name="list" id="vo">
				<tr>
					<td><input class="ids" type="checkbox" name="id[]" value="3"></td>
					<td>{$vo.uid}</td>
					<td>{$vo.nickname}</td>
					<td>{$vo.position}</td>
					<td>{$vo.department}</td>
					<td>{$vo.status_txt}</td>
					<td><input type="text" class="text {$vo.attendence_time|not_exist=attendence_time}" id="attendence-{$vo.uid}" name="attendence_time" data-format="hh:mm:ss" value="{$vo.attendence_time|datetime}" data-url="{:U('makeRecord?uid='.$vo['uid'])}"></td>
					<td><input type="text" class="text {$vo.absence_time|not_exist=absence_time}" id="absence-{$vo.uid}" name="absence_time" data-format="hh:mm:ss" value="{$vo.absence_time|datetime}" data-url="{:U('makeRecord?uid='.$vo['uid'])}"></td>
					<td>
						<button class="btn btn-success btn-attendence" data-id="{$vo.uid}" url="{:U('Attendence/makeRecord',array('uid'=>$vo[uid],'type'=>1))}" >签到</button>
						<button class="btn btn-warn btn-absence" data-id="{$vo.uid}" url="{:U('Attendence/makeRecord',array('uid'=>$vo[uid],'type'=>2))}" >签退</button>
					</td>
				</tr>
			</volist>
			</tbody>
		</table>
	</div>
    <div class="page">
        {$_page}
    </div>
</block>

<block name="script">
	<script src="__STATIC__/thinkbox/jquery.thinkbox.js"></script>
	<php>echo '<link href="__STATIC__/datetimepicker/css/datetimepicker_blue.css" rel="stylesheet" type="text/css">';</php>
	<link href="__STATIC__/datetimepicker/css/dropdown.css" rel="stylesheet" type="text/css">

	<script type="text/javascript" src="__STATIC__/datetimepicker/js/bootstrap-datetimepicker.min.js"></script>
	<script type="text/javascript" src="__STATIC__/datetimepicker/js/locales/bootstrap-datetimepicker.zh-CN.js" charset="UTF-8"></script>

	<script type="text/javascript">
	//搜索功能
	$("#search").click(function(){
		var url = $(this).attr('url');
		var status = $("#sch-sort-txt").attr("data");
		var search = $('input[name=uid]').val();
		if(status != ''){
			url += '/status/' + status;
		}
		if(search != ''){
			url += '/uid/' + encodeURIComponent(search);
		}
		window.location.href = url;
	});
	/* 高级搜索子菜单 */
	$(".search-form").find(".drop-down").hover(function(){
		$("#sub-sch-menu").removeClass("hidden");
	},function(){
		$("#sub-sch-menu").addClass("hidden");
	});
	$("#sub-sch-menu li").find("a").each(function(){
		$(this).click(function(){
			var text = $(this).text();
			$("#sch-sort-txt").text(text).attr("data",$(this).attr("value"));
			$("#sub-sch-menu").addClass("hidden");
		})
	});
    //导航高亮
    $('.side-sub-menu').find('a[href="{:U('User/index')}"]').closest('li').addClass('current');
	$(function(){
		$('.attendence_time').datetimepicker({
		  pickDate: false
		});
		
		$('.attendence_time').bind('input propertychange', function() {
			alert('start');
			if($(this).val() != ''){
				alert('start');
				var url = $(this).attr('data-url');
				var time = $(this).val();
				$.getJSON(url,{attendence_time:time},function(json){
					if(json.status == 1){
						alert('success');
					}else{
						alert('fail');
					}
				});
			}else{
				alert('q12');
			}
		});
		setInterval(function(){
			var date = new Date();
			var time = date.format("yyyy-MM-dd hh:mm:ss"); 
			$('.run-time').html(time);
			$('.run-time').show();
			$('.attendence_time').val(time);
			$('.absence_time').val(time);
			
		},1000);

		 //自动签到
		$('.btn-attendence').click(function(){
			var target;
			var that = this;
			var data_id =  $(this).attr('data-id');
			if ( $(this).hasClass('confirm') ) {
				if(!confirm('确认要执行该操作吗?')){
					return false;
				}
			}
			if(!$('#absence-'+data_id).hasClass('absence_time')){
				updateAlert("已经签退，不能签到");
				setTimeout(function(){
					$('#top-alert').find('button').click();
					
				},1500);
				return;
			}
			if(!$('#attendence-'+data_id).hasClass('attendence_time')){
				updateAlert('已经签到，不能再次签到');
				setTimeout(function(){
					$('#top-alert').find('button').click();
					
				},1500);
				return;
			}
			if ( (target = $(this).attr('href')) || (target = $(this).attr('url')) ) {
				$.get(target).success(function(data){
					if (data.status==1) {
						//这里当前用户签到时间计时
						    $('#attendence-'+data_id).removeClass('attendence_time');
							$('#absence-'+data_id).addClass('absence_time');
						    console.log(data_id);
							updateAlert(data.info,'alert-success');
						
						setTimeout(function(){
							$('#top-alert').find('button').click();
							
						},1500);
					}else{
						updateAlert(data.info);
						setTimeout(function(){
							$('#top-alert').find('button').click();
							
						},1500);
					}
				});

			}
			return false;
		});
		 //自动签退
		$('.btn-absence').click(function(){
			var target;
			var that = this;
			var data_id =  $(this).attr('data-id');
			if ( $(this).hasClass('confirm') ) {
				if(!confirm('确认要执行该操作吗?')){
					return false;
				}
			}
			if($('#attendence-'+data_id).hasClass('attendence_time')){
				updateAlert('未签到，不能签退');
				setTimeout(function(){
					$('#top-alert').find('button').click();
					
				},1500);
				return;
			}
			if(!$('#absence-'+data_id).hasClass('absence_time')){
				updateAlert('已经签退，不能再次签退');
				setTimeout(function(){
					$('#top-alert').find('button').click();
					
				},1500);
				return;
			}
			if ( (target = $(this).attr('href')) || (target = $(this).attr('url')) ) {
				$.get(target).success(function(data){
					if (data.status==1) {
						//移除签退时间计时
							$('#absence-'+data_id).removeClass('absence_time');
							updateAlert(data.info,'alert-success');
						
						setTimeout(function(){
							$('#top-alert').find('button').click();
							
						},1500);
					}else{
						updateAlert(data.info);
						setTimeout(function(){
							$('#top-alert').find('button').click();
							
						},1500);
					}
				});

			}
			return false;
		});
		
	});
	</script>
</block>
